﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_FrontEndLayout.cshtml";
}

<section>
    <div class="revolution-container">
        <div class="revolution">
            <ul class="list-unstyled">
                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1000">
                    <!-- MAIN IMAGE -->
                    <img src="~/img/slide_image/slide_1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />
                    <!-- LAYERS -->
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="160"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="300"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 4">
                        <img src="img/preview/slider/1.png" alt="">
                    </div>
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="224"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="500"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 4">
                        <img src="img/preview/slider/1-2.png" alt="">
                    </div>
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="335"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="700"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 4">
                        <img src="img/preview/slider/1-1.png" alt="">
                    </div>
                    <div class="tp-caption customin customout hidden-xs"
                        data-x="20"
                        data-y="430"
                        data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="1000"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 2">
                        <a href="#" class="btn-home">Shop All</a>
                    </div>
                    <div class="tp-caption customin customout hidden-xs"
                        data-x="145"
                        data-y="430"
                        data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="1200"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 2">
                        <a href="#" class="btn-home">Read more</a>
                    </div>
                </li>
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1000">
                    <!-- MAIN IMAGE -->
                    <img src="~/img/slide_image/slide_2.jpeg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />
                    <!-- LAYERS -->
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="204"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="500"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 2">
                        <img src="img/preview/slider/1-2.png" alt="">
                    </div>
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="315"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="700"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 2">
                        <img src="img/preview/slider/1-1.png" alt="">
                    </div>
                    <div class="tp-caption customin customout hidden-xs"
                        data-x="20"
                        data-y="410"
                        data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="1000"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 3">
                        <a href="#" class="btn-home">Shop All</a>
                    </div>
                    <div class="tp-caption customin customout hidden-xs"
                        data-x="145"
                        data-y="410"
                        data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="1200"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 4">
                        <a href="#" class="btn-home">Read more</a>
                    </div>
                </li>
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1000">
                    <!-- MAIN IMAGE -->
                    <img src="~/img/slide_image/slide_3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />
                    <!-- LAYERS -->
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="160"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="300"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 4">
                        <img src="img/preview/slider/1.png" alt="">
                    </div>
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="224"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="500"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 4">
                        <img src="img/preview/slider/1-2.png" alt="">
                    </div>
                    <div class="tp-caption skewfromrightshort customout"
                        data-x="20"
                        data-y="335"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="700"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 4">
                        <img src="img/preview/slider/1-1.png" alt="">
                    </div>
                    <div class="tp-caption customin customout hidden-xs"
                        data-x="20"
                        data-y="430"
                        data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="1000"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 2">
                        <a href="#" class="btn-home">Shop All</a>
                    </div>
                    <div class="tp-caption customin customout hidden-xs"
                        data-x="145"
                        data-y="430"
                        data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="1200"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeIn"
                        data-captionhidden="on"
                        style="z-index: 2">
                        <a href="#" class="btn-home">Read more</a>
                    </div>
                </li>
            </ul>
            <div class="revolutiontimer"></div>
        </div>
    </div>
</section>

<section>
    <div class="block color-scheme-white-90">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <article class="banner">
                        <a href="#">
                            <img src="http://placehold.it/900x677" class="img-responsive" alt="">
                        </a>
                    </article>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <article class="banner">
                        <a href="#">
                            <img src="http://placehold.it/900x677" class="img-responsive" alt="">
                        </a>
                    </article>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <article class="banner">
                        <a href="#">
                            <img src="http://placehold.it/900x677" class="img-responsive" alt="">
                        </a>
                    </article>
                </div>
            </div>
        </div>
    </div>

</section>

<section>
    <div class="block  color-scheme-3">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="title-block wow fadeInLeft">

                        <div class="icon text-center"><i class="fa fa-child"></i></div>
                        <h1>Áo sơ mi</h1>
                        <p>Áo sơ mi Thái Lan - Hàng mới về ngày 26/09/2014. Nhanh tay mua sắm nào!</p>
                        <div class="text-center">
                            <div class="toolbar-for-light" id="nav-child">
                                <a href="javascript:;" data-role="prev" class="prev"><i class="fa fa-angle-left"></i></a>
                                <a href="javascript:;" data-role="next" class="next"><i class="fa fa-angle-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div id="owl-child" class="owl-carousel">
                        <div class="text-center">
                            <article class="product light wow fadeInUp">
                                <figure class="figure-hover-overlay">
                                    <a href="#" class="figure-href"></a>
                                    <div class="product-new">new</div>
                                    <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                    <img class="img-responsive" src="~/img/bg/b1.jpg" alt="" title="">
                                </figure>
                                <div class="product-caption">
                                    <div class="block-name">
                                        <a href="#" class="product-name">Product name</a>
                                        <p class="product-price">$320.99</p>
                                    </div>
                                    <div class="product-cart">
                                        <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="text-center">
                            <article class="product light wow fadeInUp">
                                <figure class="figure-hover-overlay">
                                    <a href="#" class="figure-href"></a>
                                    <div class="product-new">new</div>
                                    <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                    <img class="img-responsive" src="~/img/bg/bg2.jpg" alt="" title="">
                                </figure>
                                <div class="product-caption">
                                    <div class="block-name">
                                        <a href="#" class="product-name">Product name</a>
                                        <p class="product-price">$320.99</p>
                                    </div>
                                    <div class="product-cart">
                                        <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="text-center">
                            <article class="product light wow fadeInUp">
                                <figure class="figure-hover-overlay">
                                    <a href="#" class="figure-href"></a>
                                    <div class="product-new">new</div>
                                    <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                    <img class="img-responsive" src="~/img/bg/b3.jpg" alt="" title="">
                                </figure>
                                <div class="product-caption">
                                    <div class="block-name">
                                        <a href="#" class="product-name">Product name</a>
                                        <p class="product-price">$320.99</p>

                                    </div>
                                    <div class="product-cart">
                                        <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="text-center">
                            <article class="product light wow fadeInUp">
                                <figure class="figure-hover-overlay">
                                    <a href="#" class="figure-href"></a>
                                    <div class="product-new">new</div>
                                    <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                    <img class="img-responsive" src="~/img/bg/b4.jpg" alt="" title="">
                                </figure>
                                <div class="product-caption">
                                    <div class="block-name">
                                        <a href="#" class="product-name">Product name</a>
                                        <p class="product-price">$320.99</p>
                                    </div>
                                    <div class="product-cart">
                                        <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="text-center">
                            <article class="product light wow fadeInUp">
                                <figure class="figure-hover-overlay">
                                    <a href="#" class="figure-href"></a>
                                    <div class="product-new">new</div>
                                    <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                    <img class="img-responsive" src="~/img/bg/b1.jpg" alt="" title="">
                                </figure>
                                <div class="product-caption">
                                    <div class="block-name">
                                        <a href="#" class="product-name">Product name</a>
                                        <p class="product-price">$320.99</p>
                                    </div>
                                    <div class="product-cart">
                                        <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="block color-scheme-white-90">
        <div class="container">
            <div class="block-product-tab">
                <div class="tab-bg"></div>
                <div class="toolbar-for-light" id="nav-tabs">
                    <a href="javascript:;" data-role="prev" class="prev"><i class="fa fa-angle-left"></i></a>
                    <a href="javascript:;" data-role="next" class="next"><i class="fa fa-angle-right"></i></a>
                </div>
                <ul class="nav nav-pills">
                    <li class="active"><a href="#new" data-toggle="tab">New Arrivals</a><div class="header-bottom-line"></div>
                    </li>
                    <li><a href="#featured" data-toggle="tab" class="disabled">Featured</a><div class="header-bottom-line"></div>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active animated fadeIn" id="new">
                        <div id="owl-new" class="owl-carousel">
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <div class="product-sale">
                                            11%
                                            <br>
                                            off
                                        </div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>


                                    </div>

                                </article>
                            </div>
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>
                            </div>
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>
                            </div>
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <div class="product-sale">
                                            17%
                                            <br>
                                            off
                                        </div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>

                            </div>
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <div class="product-sale">
                                            7%
                                            <br>
                                            off
                                        </div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane animated fadeIn" id="featured">
                        <div id="owl-featured" class="owl-carousel">

                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>
                            </div>
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <div class="product-sale">
                                            17%
                                            <br>
                                            off
                                        </div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>

                            </div>
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>
                            </div>
                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <div class="product-sale">
                                            11%
                                            <br>
                                            off
                                        </div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>
                            </div>

                            <div class="text-center">
                                <article class="product light">
                                    <figure class="figure-hover-overlay">
                                        <a href="#" class="figure-href"></a>
                                        <div class="product-new">new</div>
                                        <div class="product-sale">
                                            7%
                                            <br>
                                            off
                                        </div>
                                        <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                                        <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                                        <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                                        <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                                    </figure>
                                    <div class="product-caption">
                                        <div class="block-name">
                                            <a href="#" class="product-name">Product name</a>
                                            <p class="product-price"><span>$330</span> $320.99</p>

                                        </div>
                                        <div class="product-cart">
                                            <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                    </div>

                                </article>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<section>
    <div class="block color-scheme-white-90">
        <div class="container">
            <div class="header-with-icon">
                <i class="fa fa-tags"></i>Summer sale
                        <div class="toolbar-for-light" id="nav-bestseller">
                            <a href="javascript:;" data-role="prev" class="prev"><i class="fa fa-angle-left"></i></a>
                            <a href="javascript:;" data-role="next" class="next"><i class="fa fa-angle-right"></i></a>
                        </div>
            </div>
            <div id="owl-bestseller" class="owl-carousel">
                <div class="text-center">
                    <article class="product light">
                        <figure class="figure-hover-overlay">
                            <a href="#" class="figure-href"></a>
                            <div class="product-new">new</div>
                            <div class="product-sale">
                                11%
                                <br>
                                off
                            </div>
                            <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                            <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                            <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                            <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                        </figure>
                        <div class="product-caption">
                            <div class="block-name">
                                <a href="#" class="product-name">Lorem ipsum dolor sit amet con sec</a>
                                <p class="product-price"><span>$330</span> $320.99</p>

                            </div>
                            <div class="product-cart">
                                <a href="#"><i class="fa fa-shopping-cart"></i></a>
                            </div>
                            <div class="product-rating">
                                <div class="stars">
                                    <span class="star"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span>
                                </div>
                                <a href="" class="review">8 Reviews</a>
                            </div>
                            <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit, sed do eiusmod</p>
                        </div>

                    </article>
                </div>
                <div class="text-center">
                    <article class="product light">
                        <figure class="figure-hover-overlay">
                            <a href="#" class="figure-href"></a>
                            <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                            <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                            <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                            <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                        </figure>
                        <div class="product-caption">
                            <div class="block-name">
                                <a href="#" class="product-name">Lorem ipsum dolor sit amet con sec</a>
                                <p class="product-price"><span>$330</span> $320.99</p>

                            </div>
                            <div class="product-cart">
                                <a href="#"><i class="fa fa-shopping-cart"></i></a>
                            </div>
                            <div class="product-rating">
                                <div class="stars">
                                    <span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span>
                                </div>
                                <a href="" class="review">8 Reviews</a>
                            </div>
                            <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit, sed do eiusmod</p>
                        </div>

                    </article>
                </div>
                <div class="text-center">
                    <article class="product light">
                        <figure class="figure-hover-overlay">
                            <a href="#" class="figure-href"></a>

                            <div class="product-new">new</div>
                            <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                            <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                            <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                            <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                        </figure>
                        <div class="product-caption">
                            <div class="block-name">
                                <a href="#" class="product-name">Lorem ipsum dolor sit amet con sec</a>
                                <p class="product-price"><span>$330</span> $320.99</p>

                            </div>
                            <div class="product-cart">
                                <a href="#"><i class="fa fa-shopping-cart"></i></a>
                            </div>
                            <div class="product-rating">
                                <div class="stars">
                                    <span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span>
                                </div>
                                <a href="" class="review">8 Reviews</a>
                            </div>
                            <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit, sed do eiusmod</p>
                        </div>

                    </article>
                </div>
                <div class="text-center">
                    <article class="product light">
                        <figure class="figure-hover-overlay">
                            <a href="#" class="figure-href"></a>
                            <div class="product-sale">
                                17%
                                <br>
                                off
                            </div>
                            <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                            <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                            <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                            <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                        </figure>
                        <div class="product-caption">
                            <div class="block-name">
                                <a href="#" class="product-name">Lorem ipsum dolor sit amet con sec</a>
                                <p class="product-price"><span>$330</span> $320.99</p>

                            </div>
                            <div class="product-cart">
                                <a href="#"><i class="fa fa-shopping-cart"></i></a>
                            </div>
                            <div class="product-rating">
                                <div class="stars">
                                    <span class="star"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span>
                                </div>
                                <a href="" class="review">8 Reviews</a>
                            </div>
                            <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit, sed do eiusmod</p>
                        </div>

                    </article>

                </div>
                <div class="text-center">
                    <article class="product light">
                        <figure class="figure-hover-overlay">
                            <a href="#" class="figure-href"></a>
                            <div class="product-new">new</div>
                            <div class="product-sale">
                                7%
                                <br>
                                off
                            </div>
                            <a href="#" class="product-compare"><i class="fa fa-random"></i></a>
                            <a href="#" class="product-wishlist"><i class="fa fa-heart-o"></i></a>
                            <img src="http://placehold.it/400x500" class="img-overlay img-responsive" alt="">
                            <img src="http://placehold.it/400x500" class="img-responsive" alt="">
                        </figure>
                        <div class="product-caption">
                            <div class="block-name">
                                <a href="#" class="product-name">Lorem ipsum dolor sit amet con sec</a>
                                <p class="product-price"><span>$330</span> $320.99</p>

                            </div>
                            <div class="product-cart">
                                <a href="#"><i class="fa fa-shopping-cart"></i></a>
                            </div>
                            <div class="product-rating">
                                <div class="stars">
                                    <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                                </div>
                                <a href="" class="review">8 Reviews</a>
                            </div>
                            <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit, sed do eiusmod</p>
                        </div>

                    </article>
                </div>




            </div>
        </div>
    </div>
</section>

<section>
    <div class="block color-scheme-white-90">
        <div class="container">
            <div class="row">
                <article class="col-md-4">
                    <div class="widget-title">
                        <i class="fa fa-thumbs-up"></i>Bestseller
                    </div>
                    <div class="widget-block wow fadeInUp" data-wow-duration="1s">
                        <div class="row">
                            <div class="col-md-4 col-sm-2 col-xs-3">
                                <img class="img-responsive" src="http://placehold.it/400x500.jpg" alt="" title="">
                            </div>
                            <div class="col-md-8  col-sm-10 col-xs-9">
                                <div class="block-name">
                                    <a href="#" class="product-name">Product name</a>
                                    <p class="product-price"><span>$330</span> $320.99</p>

                                </div>
                                <div class="product-rating">
                                    <div class="stars">
                                        <span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span>
                                    </div>
                                    <a href="" class="review">8 Reviews</a>
                                </div>
                                <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit.</p>
                            </div>
                        </div>
                    </div>
                    <div class="widget-block wow fadeInUp" data-wow-duration="1s">
                        <div class="row">
                            <div class="col-md-4 col-sm-2 col-xs-3">
                                <img class="img-responsive" src="http://placehold.it/400x500" alt="" title="">
                            </div>
                            <div class="col-md-8 col-sm-10 col-xs-9">
                                <div class="block-name">
                                    <a href="#" class="product-name">Product name</a>
                                    <p class="product-price"><span>$330</span> $320.99</p>
                                </div>
                                <div class="product-rating">
                                    <div class="stars">
                                        <span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span><span class="star active"></span>
                                    </div>
                                    <a href="" class="review">8 Reviews</a>
                                </div>
                                <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit.</p>
                            </div>
                        </div>
                    </div>
                </article>
                <article class="col-md-4">
                    <div class="widget-title">
                        <i class="fa fa-user"></i>Our Store
                    </div>
                    <p class="wow fadeInUp" data-wow-duration="1s">
                        <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <blockquote class="wow fadeInUp" data-wow-duration="1s">
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </blockquote>
                </article>
                <article class="col-md-4">
                    <div class="widget-title">
                        <i class="fa fa-comments"></i>Latest Posts
                    </div>
                    <div class="widget-block wow fadeInUp" data-wow-duration="1s">
                        <div class="row">
                            <div class="col-md-4  col-sm-2 col-xs-4">
                                <img class="img-responsive" src="http://placehold.it/400x300" alt="" title="">
                            </div>
                            <div class="col-md-8  col-sm-10 col-xs-8">
                                <div class="block-name">
                                    <a href="#" class="product-name">Summer sale</a>

                                </div>
                                <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit.</p>
                            </div>
                        </div>
                    </div>
                    <div class="widget-block wow fadeInUp" data-wow-duration="1s">
                        <div class="row">
                            <div class="col-md-4 col-sm-2 col-xs-4">
                                <img class="img-responsive" src="http://placehold.it/400x300" alt="" title="">
                            </div>
                            <div class="col-md-8 col-sm-10 col-xs-8">
                                <div class="block-name">
                                    <a href="#" class="product-name">Call now</a>

                                </div>
                                <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit.</p>
                            </div>
                        </div>
                    </div>
                    <div class="widget-block wow fadeInUp" data-wow-duration="1s">
                        <div class="row">
                            <div class="col-md-4 col-sm-2 col-xs-4">
                                <img class="img-responsive" src="http://placehold.it/400x300" alt="" title="">
                            </div>
                            <div class="col-md-8 col-sm-10 col-xs-8">
                                <div class="block-name">
                                    <a href="#" class="product-name">Good day</a>

                                </div>
                                <p class="description">Lorem ipsum dolor sit amet, con sec tetur adipisicing elit.</p>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>


<section class="partners">
    <div class="block color-scheme-dark-90">
        <div class="container">
            <div class="header-for-dark">
                <h1 class="wow fadeInRight animated" data-wow-duration="2s">Nhãn hàng <span>hiện có</span></h1>
            </div>
            <div id="owl-partners" class="owl-carousel">
                <div class="partner">
                    <img src="~/img/homepage_image/Gap_logo.png" class="img-responsive" alt="" style="width: 148px; height: 148px" />
                </div>
                <div class="partner">
                    <img src="~/img/homepage_image/polo_logo.jpg" class="img-responsive" alt="" style="width: 148px; height: 148px" />
                </div>
                <div class="partner">
                    <img src="~/img/homepage_image/next_logo.jpg" class="img-responsive" alt="" style="width: 148px; height: 148px">
                </div>
                <div class="partner">
                    <img src="~/img/homepage_image/Zara_logo.gif" class="img-responsive" alt="" style="width: 148px; height: 148px" />
                </div>
                <div class="partner">
                    <img src="~/img/homepage_image/carters_logo.jpg" class="img-responsive" alt="" style="width: 148px; height: 148px" />
                </div>
                <div class="partner">
                    <img src="~/img/homepage_image/burberry_logo.jpg" class="img-responsive" alt="" style="width: 148px; height: 148px" />
                </div>
            </div>
        </div>
    </div>
</section>

<div class="block color-scheme-white-90">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <article class="payment-service wow fadeInLeft" data-wow-duration="1s">
                    <a href="#"></a>
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <i class="fa fa-thumbs-up"></i>
                        </div>
                        <div class="col-md-8">
                            <h3 class="color-active">Thanh toán online</h3>
                            <p>Chuyển khoản trực tiếp thông qua dịch vụ của các ngân hàng (VietcomBank, Viettin Bank, Dong A Bank, ...)</p>
                        </div>
                    </div>
                </article>
            </div>
            <div class="col-md-4">
                <article class="payment-service wow fadeInUp" data-wow-duration="1s">
                    <a href="#"></a>
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <i class="fa fa-truck"></i>
                        </div>
                        <div class="col-md-8">
                            <h3 class="color-active">Phí vận chuyển</h3>
                            <p>Miễn phí vận chuyển cho các quận 1, quận 3, quận 12, quận Thủ Đức và các vùng lân cận thị xã Thuận An, tỉnh Bình Dương.</p>
                        </div>
                    </div>
                </article>
            </div>
            <div class="col-md-4">
                <article class="payment-service wow fadeInRight" data-wow-duration="1s">
                    <a href="#"></a>
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <i class="fa fa-fax"></i>
                        </div>
                        <div class="col-md-8">
                            <h3 class="color-active">Hỗ trợ 24/7</h3>
                            <p>Hỗ trợ mua hàng 24/7 (Skype, Facebook, ...).
                                <br />
                                Hãy liên hệ với chúng tôi để được tư vấn sớm nhất.</p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
